<template>
    <van-swipe class="banner" 
        :autoplay="2000"
        indicator-color="#107C10">
        <van-swipe-item v-for="(item, index) in arr" :key="index">
            <router-link :to='item.link'>
                <img v-lazy="item.src" />
            </router-link>
        </van-swipe-item>
    </van-swipe>
</template>

<script>
export default {
    name:"appBanner",
	data(){
		return {
            arr: [
                {src: 'https://store-images.s-microsoft.com/image/apps.17097.14524595367279766.5574916c-be72-4bad-ab36-3d4205eb1ab8.1846326a-6469-4198-afd0-d54839d905e5?mode=scale&q=90&h=1080&w=1920', link: 'games/detail?id=100'},
                {src: 'https://store-images.s-microsoft.com/image/apps.50670.13727851868390641.c9cc5f66-aff8-406c-af6b-440838730be0.d205e025-5444-4eb1-ae46-571ae6895928?mode=scale&q=90&h=720&w=1280&background=%23FFFFFF', link: 'games/detail?id=25'},
                {src: 'https://store-images.s-microsoft.com/image/apps.8098.14585440003614248.9f7109bf-73f7-4bc7-ba61-1eeb006d905a.222e4dfa-df01-4864-a10a-bc3666f1a3cf?mode=scale&q=90&h=720&w=1280', link: 'games/detail?id=111'},
                {src: 'https://store-images.s-microsoft.com/image/apps.52598.14115267245615103.909c4994-a3a7-4ec1-9547-d0f41c2110be.605c4453-8e39-4c20-be44-8f7c3c5110a1?mode=scale&q=90&h=720&w=1280', link: 'games/detail?id=110'},
                {src: 'https://store-images.s-microsoft.com/image/apps.14387.14187388825692711.ad9b5612-f684-41a7-86b1-6e485a58e79a.043984b3-32e6-46f2-9148-9c5a80870b50?mode=scale&q=90&h=720&w=1280&background=%23FFFFFF', link: 'games/detail?id=108'},
                {src: 'https://store-images.s-microsoft.com/image/apps.39328.13809253632566266.a1f3ac36-ddef-4b21-8956-5d5668ac9650.2dbb214f-1130-426b-8c04-7cb8a0466a2d?mode=scale&q=90&h=1080&w=1920&background=%23FFFFFF', link: 'games/detail?id=117'},
            ],
		}
	}
}
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
    height: 270px;
    position: relative;
    top: 80px;
    display: flex;
    .van-swipe-item {
        width: 100%;
        font-size: 20px;
        text-align: center;
        background-color: #171717;
        a {
            img {
                width: 100%;
            }
        }
    }
}
</style>